<template>
	<view class="container">
		<view class="cate-nav">
			<scroll-view scroll-x="true" class="cate-nav-body" style="width: 750rpx;" :scroll-left="scrollLeft">
				<view v-for="(item,index) in navList" class="item" :class="id == item.id ? 'active' : ''" :key="index" :data-id="item.id"
				 @tap="switchCate">
					<view class="name jhx_f7">{{item.name}}</view>
				</view>
			</scroll-view>
		</view>
		<scroll-view scroll-y="true" :scroll-top="scrollTop" :style="{height:scrollHeight}">

			<view class="cate-item">
				<view class="b">
					<view class="item " :class="(iindex + 1) % 2 == 0 ? 'item-b' : ''" @tap="gotoGoods(iitem.id)" v-for="(iitem,iindex) in  goodsList"
					 :key="iindex">
						<image class="img" :src="iitem.picUrl" background-size="cover"></image>
						<text class="name jhx_f2">{{iitem.name}}</text>
						<view class="price">
							<view class="priceTg jhx_f8">￥{{iitem.retailPrice}}</view>
							<view class="brokerage" v-if="isAgent && iitem.brokeragePrice>0.01">赚￥{{iitem.brokeragePrice}}</view>
							<view class="brokerage" v-else>立即购买</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList: [],
				goodsList: [],
				id: 0,
				currentCategory: {},
				scrollLeft: 0,
				scrollTop: 0,
				scrollHeight: 0,
				isAgent: false,
				page: 1,
				size: 10,
				totalPages: 1
			}
		},
		onLoad: function(options) {
			// 页面初始化 options为页面跳转所带来的参数
			var that = this;
			if (options.id) {
				that.id = parseInt(options.id);
			}
			that.scrollHeight = that.windowHeight;
			this.getCategoryInfo();
		},
		onReachBottom() {

			if (this.totalPages > this.data.page) {
				that.page = this.page + 1;
			} else {
				uni.showToast({
					title: '已经到底了!',
					icon: 'none',
					duration: 2000
				});
				return false;
			}
			this.getGoodsList();

		},
		onReady: function() {
			// 页面渲染完成
			let that = this;
			let userInfo = wx.getStorageSync('userInfo');
			if (userInfo && userInfo.userLevel == 2) {
				that.setData({
					isAgent: true
				});
			}
		},
		onShow: function() {
			// 页面显示
			let that = this;
			let userInfo = wx.getStorageSync('userInfo');
			if (userInfo && userInfo.userLevel == 2) {
				that.setData({
					isAgent: true
				});
			}
		},
		methods: {
			gotoGoods(goodsId) {
				uni.navigateTo({
					url: '../goods/goods?id=' + goodsId
				})
			},
			getCategoryInfo: function() {
				let that = this;
				that.$util.request(that.$api.api.GoodsCategory, {
						id: this.id
					})
					.then(function(res) {

						if (res.errno == 0) {
							that.navList = res.data.brotherCategory;
							that.currentCategory = res.data.currentCategory;

							uni.setNavigationBarTitle({
								title: res.data.parentCategory.name
							})

							// 当id是L1分类id时，这里需要重新设置成L1分类的一个子分类的id
							if (res.data.parentCategory.id == that.id) {
								that.id = res.data.currentCategory.id;
							}
							//nav位置
							let currentIndex = 0;
							let navListCount = that.navList.length;
							for (let i = 0; i < navListCount; i++) {
								currentIndex += 1;
								if (that.navList[i].id == that.id) {
									break;
								}
							}
							if (currentIndex > navListCount / 2 && navListCount > 5) {
								that.scrollLeft = currentIndex * 60;
							}
							that.getGoodsList();

						} else {
							//显示错误信息
						}

					});
			},
			getGoodsList: function() {
				var that = this;

				that.$util.request(that.$api.api.GoodsList, {
						categoryId: that.id,
						page: that.page,
						size: that.size
					})
					.then(function(res) {
						that.goodsList = that.goodsList.concat(res.data.goodsList);
						that.totalPages = res.data.totalPages;
					});
			},
			switchCate: function(event) {
				if (this.id == event.currentTarget.dataset.id) {
					return false;
				}
				var that = this;
				var clientX = event.detail.x;
				var currentTarget = event.currentTarget;
				if (clientX < 60) {
					that.scrollLeft = currentTarget.offsetLeft - 60;
				} else if (clientX > 330) {
					that.scrollLeft = currentTarget.offsetLeft;
				}
				that.id = event.currentTarget.dataset.id;
				that.goodsList = [];
				that.page = 1;
				that.totalPages = 1;

				this.getCategoryInfo();
			},
		}
	}
</script>

<style>
	.container {
		background: #f9f9f9;
	}

	.cate-nav {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
	}

	.cate-nav-body {
		height: 84rpx;
		white-space: nowrap;
		background: #fff;
		border-top: 1px solid rgba(0, 0, 0, 0.15);
		overflow: hidden;
	}

	.cate-nav .item {
		display: inline-block;
		height: 84rpx;
		min-width: 130rpx;
		padding: 0 15rpx;
	}

	.cate-nav .item .name {
		display: block;
		height: 84rpx;
		padding: 0 20rpx;
		line-height: 84rpx;
		width: auto;
	}

	.cate-nav .item.active .name {
		color: #85c43f;
		border-bottom: 2px solid #85c43f;
	}

	.cate-item {
		margin-top: 94rpx;
		height: auto;
		overflow: hidden;
	}

	.cate-item .h {
		height: 145rpx;
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.cate-item .h .name {
		display: block;
		height: 35rpx;
		margin-bottom: 18rpx;
		font-size: 30rpx;
		color: #333;
	}

	.cate-item .h .desc {
		display: block;
		height: 24rpx;
		font-size: 24rpx;
		color: #999;
	}

	.cate-item .b {
		width: 750rpx;
		padding: 0 6.25rpx;
		height: auto;
		overflow: hidden;
	}

	.cate-item .b .item {
		float: left;
		background: #fff;
		width: 365rpx;
		margin-bottom: 6.25rpx;
		padding-bottom: 33.333rpx;
		height: auto;
		overflow: hidden;
		text-align: center;
	}

	.cate-item .b .item-b {
		margin-left: 6.25rpx;
	}

	.cate-item .item .img {
		width: 302rpx;
		height: 302rpx;
	}

	.cate-item .item .name {
		display: block;
		width: 365.625rpx;
		height: 35rpx;
		margin: 11.5rpx 0 22rpx 0;
		text-align: center;
		overflow: hidden;
		padding: 0 20rpx;
		font-size: 30rpx;
		color: #333;
	}

	.cate-item .item .price {
		display: flex;
		width: 365.625rpx;
		height: 50rpx;
		text-align: center;
		color: #ec4223;
	}

	.cate-item .b .priceTg {
		width: 55%;
	}

	.cate-item .b .brokerage {
		float: left;
		padding: 5px;
		line-height: 25rpx;
		background: #e68d08;
		border-radius: 20rpx;
		color: #fff;
		margin: 0rpx;
		text-align: center;
		width: 40%;
	}
</style>
